
<template>
    <div>
        <div class="title" flex items-center>
            <div class="title-line" mr-5></div>
            <span>数据总览</span>
        </div>
        <Row :gutter="28">
            <Col :span="6">
            <div class="total-card">
                <div class="total-data">
                    <div class="total-data__left">390 <span>(最高)</span></div>
                    <div class="total-data__right total-data__api">

                        <div class="dot"></div>
                        <span>Direct</span>
                    </div>
                </div>
                <div class="total-card__echart" ref="totalApiLineRef"></div>
            </div>
            </Col>
            <Col :span="6">
            <div class="total-card">
                <div class="total-data">
                    <div class="total-data__left">90 <span>(最高)</span></div>
                    <div class="total-data__right total-data__ui">

                        <div class="dot"></div>
                        <span>Mail Ad</span>
                    </div>
                </div>
                <div class="total-card__echart" ref="totalUiLineRef"></div>
            </div>
            </Col>
            <Col :span="6">
            <div class="total-card">
                <div class="total-data">
                    <div class="total-data__left">290 <span>(最高)</span></div>
                    <div class="total-data__right total-data__mix">

                        <div class="dot"></div>
                        <span>Affiliate Ad</span>
                    </div>
                </div>
                <div class="total-card__echart" ref="totalMixLineRef"></div>
            </div>
            </Col>
            <Col :span="6">
            <div class="total-card">
                <div class="total-data">
                    <div class="total-data__left">240 <span>(最高)</span></div>
                    <div class="total-data__right total-data__stress">

                        <div class="dot"></div>
                        <span>Video Ad</span>
                    </div>
                </div>
                <div class="total-card__echart" ref="totalStressLineRef"></div>
            </div>
            </Col>
        </Row>
    </div>
    <Row :gutter="32" mt-9>
        <Col span="12">
        <div>
            <div class="title" flex items-center>
                <div class="title-line" mr-5></div>
                <span>API自动化总览</span>
            </div>
            <div class="type-card">
                <Row :gutter="28">
                    <Col :span="12">
                    <div ref="apiBarRef" class="type-card__api-bar"></div>
                    </Col>
                    <Col :span="12">
                    <div ref="apiPieRef"  class="type-card__api-pie"></div>
                    </Col>
                </Row>
            </div>
        </div>
        </Col>
        <Col span="12">
        <div>
            <div class="title" flex items-center>
                <div class="title-line" mr-5></div>
                <span>UI自动化总览</span>
            </div>
            <div class="type-card">
                <Row :gutter="28">
                    <Col :span="12">
                    <div ref="UiBarRef" class="type-card__api-bar"></div>
                    </Col>
                    <Col :span="12">
                    <div ref="UiPieRef"  class="type-card__api-pie"></div>
                    </Col>
                </Row>
            </div>
        </div>
        </Col>
    </Row>
    <Row :gutter="32" my-9>
        <Col span="12">
        <div>
            <div class="title" flex items-center>
                <div class="title-line" mr-5></div>
                <span>MIX自动化数据总览</span>
            </div>
            <div class="type-card">
                <Row :gutter="28">
                    <Col :span="24">
                    <div ref="MixBarRef" class="type-card__api-bar"></div>
                    </Col>
                </Row>
            </div>
        </div>
        </Col>
        <Col span="12">
        <div>
            <div class="title" flex items-center>
                <div class="title-line" mr-5></div>
                <span>STRESS自动化数据总览</span>
            </div>
            <div class="type-card">
                <Row :gutter="28">
                    <Col :span="12">
                    <div ref="stressBarRef" class="type-card__api-bar"></div>
                    </Col>
                    <Col :span="12">
                    <div ref="strssPicRef" class="type-card__api-bar"></div>
                    </Col>
                </Row>
            </div>
        </div>
        </Col>
    </Row>
</template>

<script lang="ts" setup>
import { Row, Col, Card } from 'ant-design-vue';
import * as echarts from 'echarts';

const totalApiLineRef = ref(null);
const totalUiLineRef = ref(null);
const totalMixLineRef = ref(null);
const totalStressLineRef = ref(null);

const apiBarRef = ref(null);
const apiPieRef = ref(null);

const UiBarRef = ref(null);
const UiPieRef = ref(null);

const MixBarRef = ref(null);

const stressBarRef = ref(null);
const strssPicRef = ref(null);

const { openLight } = storeToRefs(useGlobalConfigStore())

const styles = {
    totalBarLine:{ light: '#999999', dark: '#383d47'},
    legendColor:{light: '#666666', dark: '#FFFFFF'},
    barColor: {light: '#999999', dark: '#363740'}
}

onMounted(() => {
    totalApiLineInit(echarts.init(totalApiLineRef.value))
    totalUiLineInit(echarts.init(totalUiLineRef.value))
    totalMixLineInit(echarts.init(totalMixLineRef.value))
    totalStressLineInit(echarts.init(totalStressLineRef.value))

    apiBarInit(echarts.init(apiBarRef.value))
    apiPieInit(echarts.init(apiPieRef.value))

    UiBarInit(echarts.init(UiBarRef.value))
    UiPieInit(echarts.init(UiPieRef.value))

    MixBarInit(echarts.init(MixBarRef.value))

    stressBarInit(echarts.init(stressBarRef.value))
    strssPieRefInit(echarts.init(strssPicRef.value))
});

const totalApiLineInit = (initValue: any) => {
    const chart = initValue;
    const option = {
        xAxis: {
            boundaryGap: false,
            axisLine: {
                show: true
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: styles.barColor[openLight ? 'light' : 'dark'],
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0.3, color: 'transparent' // 0% 处的颜色
                        }, {
                            offset: 1, color: styles.totalBarLine[openLight ? 'light' : 'dark'] // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            show: false,
            type: 'value'
        },
        series: [
            {
                symbol: 'none',
                lineStyle: {
                    color: '#FD67BE', // 线条颜色
                    width: 2 // 线条宽度
                },
                areaStyle: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
                    //相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(253, 103, 190, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(253, 103, 190, 0)', // 100% 处的颜色
                            },
                        ],
                        false), //globalCoord为false，表示使用自身坐标系进行渐变。 
                },

                data: [0, 12, 15, 14, 32, 21, 2],
                type: 'line',
                smooth: true
            }
        ]
    };
    chart.setOption(option);
}

const totalUiLineInit = (initValue: any) => {
    const chart = initValue;
    const option = {
        xAxis: {
            boundaryGap: false,
            axisLine: {
                show: true
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color:  styles.barColor[openLight ? 'light' : 'dark'],
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0.3, color: 'transparent' // 0% 处的颜色
                        }, {
                            offset: 1, color: styles.totalBarLine[openLight ? 'light' : 'dark']  // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            show: false,
            type: 'value'
        },
        series: [
            {
                symbol: 'none',
                lineStyle: {
                    color: '#FE65FF', // 线条颜色
                    width: 2 // 线条宽度
                },
                areaStyle: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
                    //相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(254, 101, 255, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(254, 101, 255, 0)', // 100% 处的颜色
                            },
                        ],
                        false), //globalCoord为false，表示使用自身坐标系进行渐变。 
                },

                data: [0, 32, 10, 16, 5, 21, 2],
                type: 'line',
                smooth: true
            }
        ]
    };
    chart.setOption(option);
}

const totalMixLineInit = (initValue: any) => {
    const chart = initValue;
    const option = {
        xAxis: {
            boundaryGap: false,
            axisLine: {
                show: true
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color:  styles.barColor[openLight ? 'light' : 'dark'],
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0.3, color: 'transparent' // 0% 处的颜色
                        }, {
                            offset: 1, color: styles.totalBarLine[openLight ? 'light' : 'dark']  // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            show: false,
            type: 'value'
        },
        series: [
            {
                symbol: 'none',
                lineStyle: {
                    color: '#7B65FF', // 线条颜色
                    width: 2 // 线条宽度
                },
                areaStyle: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
                    //相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(123, 101, 255, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(123, 101, 255, 0)', // 100% 处的颜色
                            },
                        ],
                        false), //globalCoord为false，表示使用自身坐标系进行渐变。 
                },

                data: [0, 22, 15, 4, 32, 21, 2],
                type: 'line',
                smooth: true
            }
        ]
    };
    chart.setOption(option);
}


const totalStressLineInit = (initValue: any) => {
    const chart = initValue;
    const option = {
        xAxis: {
            boundaryGap: false,
            axisLine: {
                show: true
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color:  styles.barColor[openLight ? 'light' : 'dark'],
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0.3, color: 'transparent' // 0% 处的颜色
                        }, {
                            offset: 1, color: styles.totalBarLine[openLight ? 'light' : 'dark']  // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            show: false,
            type: 'value'
        },
        series: [
            {
                symbol: 'none',
                lineStyle: {
                    color: '#65F6FF', // 线条颜色
                    width: 2 // 线条宽度
                },
                areaStyle: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
                    //相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(101, 246, 255, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(101, 246, 255, 0)', // 100% 处的颜色
                            },
                        ],
                        false), //globalCoord为false，表示使用自身坐标系进行渐变。 
                },

                data: [0, 7, 40, 14, 32, 21, 0],
                type: 'line',
                smooth: true
            }
        ]
    };
    chart.setOption(option);
}


const apiBarInit = (initValue: any) => {
    const chart = initValue;
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '7%',
            right: '0',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['1', '2', '3', '4', '5'],
                axisTick: {
                    show: false,
                },
                axisLine: {
                    color: styles.barColor[openLight ? 'light' : 'dark'],
                },
                axisLabel: {
                    color: styles.barColor[openLight ? 'light' : 'dark'],
                }
            }
        ],
        yAxis: [
            {
                splitLine: {
                    lineStyle: {
                        show: true,
                        color: styles.barColor[openLight ? 'light' : 'dark'],
                    }
                },
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '40%',
                data: [10, 52, 200, 334, 390, 330, 220],
                emphasis: {
                    barBorderRadius: 30
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: [50, 50, 0, 0],
                        lapel: {
                            show: true,//开启显示position:'top'，//在上方显示
                            textstyle: {//数值样式
                                color: '#6E7079',
                                fontsize: 14
                            }
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(123, 101, 255, 1)' },//底部柱图渐变色
                            { offset: 1, color: 'rgba(123, 101, 255, 0.1)' }//顶部图渐变色
                        ])

                    }
                }
            }
        ]
    };
    chart.setOption(option);


}


const apiPieInit = (initValue: any) => {
    const chart = initValue;
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: 'center',
            right: 40,
            orient: 'vertical',
            itemGap: 20,
            icon:'circle',
            textStyle: {
                color: styles.legendColor[openLight ? 'light' : 'dark'],
            },
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '60%'],
                center:['30%', '50%'],
                labelLine:{
                    show: false
                },
                label:{
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine',itemStyle: {
            color: new echarts.graphic.LinearGradient( 0, 1, 1, 1,
                [
                    {offset: 0, color: 'rgba(142, 64, 219, 1)'},
                    {offset: 1, color: 'rgba(133, 62, 226, 1)'}, 
                ]
            )
          }, },
                    { value: 735, name: 'Direct',itemStyle: {
            color: new echarts.graphic.LinearGradient( 0, 1, 1, 1,
                [
                    {offset: 0, color: 'rgba(98, 56, 254, 1)'},
                    {offset: 1, color: 'rgba(129, 61, 229, 1)'}, 
                ]
            )
          }, },
                    { value: 580, name: 'Email',itemStyle: {
            color: new echarts.graphic.LinearGradient( 0, 1, 1, 1,
                [
                    {offset: 0, color: 'rgba(133, 62, 226, 1)'},
                    {offset: 1, color: 'rgba(220, 77, 158, 1)'}, 
                ]
            )
          },  },
                    { value: 484, name: 'Union Ads',itemStyle: {
            color: new echarts.graphic.LinearGradient( 0, 1, 1, 1,
                [
                    {offset: 0, color: 'rgba(98, 56, 254, 1)'},
                    {offset: 1, color: 'rgba(129, 61, 229, 1)'}, 
                ]
            )
          },  },
                    { value: 300, name: 'Video Ads', itemStyle: {
            color: new echarts.graphic.LinearGradient( 0, 1, 1, 1,
                [
                    {offset: 0, color: 'rgba(98, 56, 254, 1)'},
                    {offset: 1, color: 'rgba(129, 61, 229, 1)'}, 
                ]
            )
          },  }
                ]
            }
        ]
    };
    chart.setOption(option);
}


const UiBarInit = (initValue: any) => {
    const chart = initValue;
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '7%',
            right: '0',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['1', '2', '3', '4', '5'],
                axisTick: {
                    show: false,
                },
                axisLine: {
                    color: styles.barColor[openLight ? 'light' : 'dark'],
                },
                axisLabel: {
                    color: '#707070'
                }
            }
        ],
        yAxis: [
            {
                splitLine: {
                    lineStyle: {
                        show: true,
                        color: styles.barColor[openLight ? 'light' : 'dark'],
                    }
                },
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '40%',
                data: [10, 52, 200, 334, 390, 330, 220],
                emphasis: {
                    barBorderRadius: 30
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: [50, 50, 0, 0],
                        lapel: {
                            show: true,//开启显示position:'top'，//在上方显示
                            textstyle: {//数值样式
                                color: '#6E7079',
                                fontsize: 14
                            }
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(101, 246, 255, 1)' },//底部柱图渐变色
                            { offset: 1, color: 'rgba(101, 246, 255, 0.1)' }//顶部图渐变色
                        ])

                    }
                }
            }
        ]
    };
    chart.setOption(option);

}


const UiPieInit = (initValue: any) => {
    const chart = initValue;
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: 'center',
            right: 40,
            orient: 'vertical',
            itemGap: 20,
            icon:'circle',
            textStyle: {
                color: styles.barColor[openLight ? 'light' : 'dark'],
            },
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '60%'],
                center:['40%', '50%'],
                padAngle: 2,
      
      label:{
        show: true,
        position: 'inner', // 将标签置于内侧
        color:'#FFFFFF'
      },
      labelLine: {
                show: false
            },
                data: [
                    { value: 1048, name: '50%', itemStyle: { color: '#681EFC' } },
                    { value: 735, name: '20%', itemStyle: { color: '#80B3FF' } },
                    { value: 580, name: '15%', itemStyle: { color: '#00E5FF' } },
                    { value: 484, name: '10%', itemStyle: { color: '#80D8FF' } },
                    { value: 300, name: '5%', itemStyle: { color: '#3868C2' } }
                ]
            }
        ]
    };
    chart.setOption(option);
}


const MixBarInit = (initValue: any) => {
    const chart = initValue;
    const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: '20%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        axisTick:{
          show: false
      },
      
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: [
      {
        splitLine:{
            lineStyle:{
                color: styles.barColor[openLight ? 'light' : 'dark'],
            }
                },
        type: 'value'
      }
    ],
    series: [
      {
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        type: 'bar',
        data: [862, 1018, 964, 1026, 1679, 1600, 1570],
        emphasis: {
          focus: 'series'
        },
        markLine: {
          lineStyle: {
            type: 'dashed'
          },
          data: [[{ type: 'min' }, { type: 'max' }]]
        }
      },
      {
        type: 'bar',
        barWidth: 5,
        stack: 'Search Engine',
        emphasis: {
          focus: 'series'
        },
        data: [620, 732, 701, 734, 1090, 1130, 1120]
      },
      {
        type: 'bar',
        stack: 'Search Engine',
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 290, 230, 220]
      },
      {
        type: 'bar',
        stack: 'Search Engine',
        emphasis: {
          focus: 'series'
        },
        data: [60, 72, 71, 74, 190, 130, 110]
      },
      {
        type: 'bar',
        stack: 'Search Engine',
        emphasis: {
          focus: 'series'
        },
        data: [62, 82, 91, 84, 109, 110, 120]
      }
    ]
  };
  chart.setOption(option);
}


const stressBarInit = (initValue: any) => {
    const chart = initValue;
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '7%',
            right: '0',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['1', '2', '3', '4', '5'],
                axisTick: {
                    show: false,
                },
                axisLine: {
                    color: styles.barColor[openLight ? 'light' : 'dark'],
                },
                axisLabel: {
                    color: styles.barColor[openLight ? 'light' : 'dark'],
                }
            }
        ],
        yAxis: [
            {
                splitLine: {
                    lineStyle: {
                        show: true,
                        color: styles.barColor[openLight ? 'light' : 'dark'],
                    }
                },
                
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '40%',
                data: [10, 52, 200, 334, 390, 330, 220],
                emphasis: {
                    barBorderRadius: 30
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: [50, 50, 0, 0],
                        lapel: {
                            show: true,//开启显示position:'top'，//在上方显示
                            textstyle: {//数值样式
                                color: '#6E7079',
                                fontsize: 14
                            }
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(251, 219, 146, 1)' },//底部柱图渐变色
                            { offset: 1, color: 'rgba(251, 219, 146, 0.1)' }//顶部图渐变色
                        ])

                    }
                }
            }
        ]
    };
    chart.setOption(option);
}


const strssPieRefInit = (initValue: any) => {
    const chart = initValue;
    const option =  {
        legend: {
            top: 'center',
            right: 40,
            orient: 'vertical',
            itemGap: 20,
            icon:'circle',
            textStyle: {
                color: styles.legendColor[openLight ? 'light' : 'dark'],
            },
        },
  series: [
    {
      type: 'pie',
      radius: '60%',
      center: ['40%', '50%'],
      selectedMode: 'single',
      labelLine:{show: false,},
      label:{
        distanceToLabelLine: -15,
      },
      data: [
        {value: 1548, name: '10%', label:{color: '#9D80FC'}, itemStyle: {color: '#9D80FC'}},
        { value: 735, name: '20%', label:{color: '#80FFEC'}, itemStyle: {color: '#80FFEC'} },
        { value: 510, name: '30%', label:{color: '#81C6FF'}, itemStyle: {color: '#81C6FF'} },
        { value: 434, name: '15%', label:{color: '#649AFF'}, itemStyle: {color: '#649AFF'} },
        { value: 335, name: '25%', label:{color: '#80D8FF'}, itemStyle: {color: '#80D8FF'} }
      ],
    }
  ]
};
chart.setOption(option);

}


</script>

<style lang="scss" >
.ant-layout .ant-layout-content {
    // background: var(--theme-color);
    overflow: hidden;
    overflow-y: scroll;
}

.data-row {
    margin-top: 20px;
}

.title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}

.title-line {
    width: 2px;
    height: 15px;
    background: #6F8DE9
}

.total-card {
    width: 382px;
    height: 240px;
    border-radius: 18px 18px 18px 18px;
    background: var(--theme-color);
    border: 1px solid var(--echart-card-border);
    box-shadow: 0 2px 12px 0 var(--echart-card-shadow);

    &__echart {
        width: 382px;
        height: 200px;
    }
}

.total-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 30px 30px 0 30px;


    &__left {
        color: var(--text-color);
        font-size: 38px;

        span {
            font-size: 13px;
        }
    }

    &__right {
        font-size: 16px;
        display: flex;
        align-items: center;



        .dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            margin-right: 10px;
        }
    }

    &__api {
        span {
            color: #FD67BE;
        }

        .dot {
            background: #FD67BE;
        }
    }

    &__ui {
        span {
            color: #FE65FF;
        }

        .dot {
            background: #FE65FF;
        }
    }

    &__mix {
        span {
            color: #7B65FF;
        }

        .dot {
            background: #7B65FF;
        }
    }

    &__stress {
        span {
            color: #65F6FF;
        }

        .dot {
            background: #65F6FF;
        }
    }
}

.type-card {
    width: 100%;
    height: 282px;
    // background: #1E1F23;
    border-radius: 18px;
    background: var(--theme-color);
    border: 1px solid var(--echart-card-border);
    box-shadow: 0 2px 12px 0 var(--echart-card-shadow);

    &__api-bar {
        width: 100%;
        height: 282px;
    }

    &__api-pie{
        width: 100%;
        height: 282px;
    }
}
</style>
